<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/index.css" type="text/css" />
    <style></style>
  </head>
  <body>
    <div id="app">
      <div class="main-left">
        <h4 class="left-head">订单栏</h4>

        <floor-one
          :dingdanps="dingdanps"
          @noworderclick-com="noworderclick"
          @guadanclick-com="guadanclick"
          @fukuanclick-com="fukuanclick"
          @quxiaoclick-com="quxiaoclick"
        >
        </floor-one>

        <div class="floor-two">
          <span>商品名称</span>
          <span>价格</span>
          <span>数量</span>
          <span>操作</span>
        </div>
        <transition name="fade" mode="out-in">
          <component
            :is="comName"
            :nowdingdanlist="nowdingdanlist"
            @add-com="add"
            @jian-com="jian"
            @remove-com="remove"
          ></component>
        </transition>
        <foot-money :money="money"></foot-money>
      </div>
      <div class="main-right">
        <h4 class="right-head">产品栏</h4>
        <right-floor-one
          :chanpinps="chanpinps"
          @commonfood-com="commonfood"
          @mainmenu-com="mainmenu"
        ></right-floor-one>

        <div class="right-floor-two">
          <span>饮料</span>
          <span>主食</span>
          <span>小吃</span>
        </div>
        <transition name="food">
          <div class="right-floor-stree" v-if="menuorder=='commonfoodtext'">
            <div class="yinliao">
              <box-shangpin
                v-for="item in yinliaolist"
                :item="item"
                @addgoods-com="addgoods"
              ></box-shangpin>
            </div>
            <div class="zhushi">
              <box-shangpin
                v-for="item in zhushilist"
                :item="item"
                @addgoods-com="addgoods"
              ></box-shangpin>
            </div>
            <div class="xiaochi">
              <box-shangpin
                v-for="item in xiaoshilist"
                :item="item"
                @addgoods-com="addgoods"
              ></box-shangpin>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <script src="./js/index.js" type="module">
     
    </script>
  </body>
</html>
